<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px" label-position="top">
            <el-row>
                <el-col :span="7"><el-form-item prop="name" :label="$t('food.name')">
                        <el-input v-model="dataForm.name" :placeholder="$t('food.name')"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="7" :offset="1"><el-form-item prop="code" :label="$t('food.code')">
                        <el-input v-model="dataForm.code" :placeholder="$t('food.code')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"> <el-form-item prop="categoryName" :label="$t('food.categoryName')"
                        class="category-list">
                        <el-popover :width="400" ref="categoryListPopover" placement="bottom-start" trigger="click"
                            popper-class="popover-pop">
                            <template v-slot:reference>
                                <el-input v-model="dataForm.categoryName" :readonly="true"
                                    :placeholder="$t('food.categoryName')">
                                    <template v-slot:suffix>
                                        <el-icon v-if="dataForm.pid !== '0'" @click.stop="categoryTreeSetDefaultHandle()"
                                            class="el-input__icon"><circle-close /></el-icon>
                                    </template> </el-input></template>
                            <div class="popover-pop-body"><el-tree :data="categoryList"
                                    :props="{ label: 'name', children: 'children' }" node-key="id" ref="categoryListTree"
                                    :highlight-current="true" :expand-on-click-node="false" accordion
                                    @current-change="categoryTreeCurrentChangeHandle"> </el-tree></div>
                        </el-popover>
                    </el-form-item></el-col>
                    
            </el-row>

            <el-row>
                <el-col :span="7"><el-form-item prop="edible" :label="$t('food.edible')">
                        <el-input v-model="dataForm.edible" :placeholder="$t('food.edible')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="water" :label="$t('food.water')">
                        <el-input v-model="dataForm.water" :placeholder="$t('food.water')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="energy" :label="$t('food.energy')">
                        <el-input v-model="dataForm.energy" :placeholder="$t('food.energy')"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row>
                <el-col :span="7"> <el-form-item prop="protein" :label="$t('food.protein')">
                        <el-input v-model="dataForm.protein" :placeholder="$t('food.protein')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="fat" :label="$t('food.fat')">
                        <el-input v-model="dataForm.fat" :placeholder="$t('food.fat')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"> <el-form-item prop="cholesterol" :label="$t('food.cholesterol')">
                        <el-input v-model="dataForm.cholesterol" :placeholder="$t('food.cholesterol')"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row>
                <el-col :span="7"> <el-form-item prop="ash" :label="$t('food.ash')">
                        <el-input v-model="dataForm.ash" :placeholder="$t('food.ash')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"> <el-form-item prop="CHO" :label="$t('food.CHO')">
                        <el-input v-model="dataForm.CHO" :placeholder="$t('food.CHO')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="dietary_fiber" :label="$t('food.dietary_fiber')">
                        <el-input v-model="dataForm.dietary_fiber" :placeholder="$t('food.dietary_fiber')"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row>
                <el-col :span="7"><el-form-item prop="carotene" :label="$t('food.carotene')">
                        <el-input v-model="dataForm.carotene" :placeholder="$t('food.carotene')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="vitaminA" :label="$t('food.vitaminA')">
                        <el-input v-model="dataForm.vitaminA" :placeholder="$t('food.vitaminA')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="a_TE" :label="$t('food.a_TE')">
                        <el-input v-model="dataForm.a_TE" :placeholder="$t('food.a_TE')"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"><el-form-item prop="thiamin" :label="$t('food.thiamin')">
                        <el-input v-model="dataForm.thiamin" :placeholder="$t('food.thiamin')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="riboflavin" :label="$t('food.riboflavin')">
                        <el-input v-model="dataForm.riboflavin" :placeholder="$t('food.riboflavin')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="niacin" :label="$t('food.niacin')">
                        <el-input v-model="dataForm.niacin" :placeholder="$t('food.niacin')"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"> <el-form-item prop="vitaminC" :label="$t('food.vitaminC')">
                        <el-input v-model="dataForm.vitaminC" :placeholder="$t('food.vitaminC')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="Ca" :label="$t('food.Ca')">
                        <el-input v-model="dataForm.Ca" :placeholder="$t('food.Ca')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="P" :label="$t('food.P')">
                        <el-input v-model="dataForm.P" :placeholder="$t('food.P')"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"> <el-form-item prop="K" :label="$t('food.K')">
                        <el-input v-model="dataForm.K" :placeholder="$t('food.K')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="Na" :label="$t('food.Na')">
                        <el-input v-model="dataForm.Na" :placeholder="$t('food.Na')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"> <el-form-item prop="Mg" :label="$t('food.Mg')">
                        <el-input v-model="dataForm.Mg" :placeholder="$t('food.Mg')"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"> <el-form-item prop="Fe" :label="$t('food.Fe')">
                        <el-input v-model="dataForm.Fe" :placeholder="$t('food.Fe')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="Zn" :label="$t('food.Zn')">
                        <el-input v-model="dataForm.Zn" :placeholder="$t('food.Zn')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="Se" :label="$t('food.Se')">
                        <el-input v-model="dataForm.Se" :placeholder="$t('food.Se')"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"><el-form-item prop="Cu" :label="$t('food.Cu')">
                        <el-input v-model="dataForm.Cu" :placeholder="$t('food.Cu')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1">
                    <el-form-item prop="Mn" :label="$t('food.Mn')">
                        <el-input v-model="dataForm.Mn" :placeholder="$t('food.Mn')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="I" :label="$t('food.I')">
                        <el-input v-model="dataForm.I" :placeholder="$t('food.I')"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row>
                <el-col :span="7"><el-form-item prop="SFA" :label="$t('food.SFA')">
                        <el-input v-model="dataForm.SFA" :placeholder="$t('food.SFA')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="MUFA" :label="$t('food.MUFA')">
                        <el-input v-model="dataForm.MUFA" :placeholder="$t('food.MUFA')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"><el-form-item prop="PUFA" :label="$t('food.PUFA')">
                        <el-input v-model="dataForm.PUFA" :placeholder="$t('food.PUFA')"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row>
                <el-col :span="7"><el-form-item prop="total" :label="$t('food.total')">
                        <el-input v-model="dataForm.total" :placeholder="$t('food.total')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="7" :offset="1"></el-col>
                <el-col :span="7" :offset="1"></el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import baseService from "@/service/baseService"
import { useAppStore } from "@/store";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const store = useAppStore();
const { t } = useI18n();

const emit = defineEmits(["refreshDataList"]);
const visible = ref(false);
const dataFormRef = ref();
const categoryList = ref([]);
const rules = ref({
    name: [{ required: true, message: t("validate.required"), trigger: "blur" }],
    categoryName: [{ required: true, message: t("validate.required"), trigger: "change" }]
});
const dataForm = reactive({
    id: "",
    name: "",
    code: "",
    categoryName: "",
    sort: 0,
    pid: "",
    edible: "",
    water: "",
    energy: "",
    protein: "",
    fat: "",
    cholesterol: "",
    ash: "",
    CHO: "",
    dietary_fiber: "",
    carotene: "",
    vitaminA: "",
    a_TE: "",
    thiamin: "",
    riboflavin: "",
    niacin: "",
    vitaminC: "",
    Ca: "",
    P: "",
    K: "",
    Na: "",
    Mg: "",
    Fe: "",
    Zn: "",
    Se: "",
    Cu: "",
    Mn: "",
    I: "",
    SFA: "",
    MUFA: "",
    PUFA: "",
    total: ""
})
const categoryListPopover = ref();
const categoryListTree = ref()

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";

    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }

    getCategoryList().then(() => {
        if (id) {
            getInfo(id)
        }
    })
}

// 获取部门列表
const getCategoryList = () => {
    return baseService.get("/sys/dept/list").then((res) => {
        if (res.code !== 0) {
            return ElMessage.error(res.msg);
        }
        categoryList.value = res.data;
    });
};

// 获取信息
const getInfo = (id: number) => {
    baseService.get(`/edu/diet/ingredient/Info/${id}`).then((res) => {
        Object.assign(dataForm, res.data);

        if (dataForm.pid === "0") {
            return categoryTreeSetDefaultHandle()
        }
        categoryListTree.value.setCurrentKey(dataForm.pid)
    })
}

// 上级部门树, 设置默认值
const categoryTreeSetDefaultHandle = () => {
    dataForm.pid = "0";
    dataForm.categoryName = t("food.categoryDefault");
};


// 上级分类树, 选中
const categoryTreeCurrentChangeHandle = () => { }

// 表单提交
const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        baseService.post
            ((!dataForm.id ? '/edu/diet/ingredient/Info/save' : '/edu/diet/ingredient/Info/update'), {
                ...dataForm,
            }).then((res) => {
                ElMessage.success({
                    message: t("prompt.success"),
                    duration: 500,
                    onClose: () => {
                        visible.value = false;
                        emit("refreshDataList");
                    }
                });
            });
    });
 }

defineExpose({
    init
})

</script>